<%@ page import="modelo.Jugador"%>
<%@ page import="modelo.Terreno"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<r:require modules="bootstrap"/>
</head>
<body>
<div>
	<div style="text-align: center;">
		<H4>
			Jugador: ${jugadorA.nombre}</H4>

		<H5>
			Monedero: ${jugadorA.monedero}</H5>
	
		<!-- ------------ logeo ------ -->
		<div class="logeo" >
		<g:if test="${errorMessage}">
			<div class="row">
				<div class="span8 alert alert-error">
					<h6>
						${errorMessage}
					</h6>
				</div>
			</div>	
		</g:if>
			<div class="row">
				<h6>
					${msj1}
				</h6>
			</div>	
		
		<g:if test="${msj2}">
			<div class="row">
				<h6>
					${msj2}
				</h6>
			</div>	
		</g:if>
		<g:if test="${msj3}">
			<div class="row">
				<h6>
					${msj3}
				</h6>
			</div>	
		</g:if>
		<g:if test="${msj4}">
			<div class="row">
				<h6>
					${msj4}
				</h6>
			</div>	
		</g:if>
		</div>

		<!-- ------------fin de logeo-------------- -->
<a type="btn btn-primary" class="btn btn-primary" href="#atacarMenu" data-toggle="modal">Atacar</a>
<a type="btn btn-primary" class="btn btn-primary" href="#plantar1" data-toggle="modal">Plantar</a>
</div>
<div class="accordion" id="accordionPadre">
		<div class="accordion-group">
			<div class="accordion-heading" style="text-align: center;">
				<a class="accordion-toggle, btn btn-primary" style="text-align: center" data-toggle="collapse"
					data-parent="#accordionPadre" href="#collapseOne"> Jardin Principal </a>
			</div>
	<div class="grillaPrincipal">
		<div id="collapseOne" class="accordion-body collapse in">
				<div class="accordion-inner">
		<table
			class="table table-striped table-bordered table-hover table-condensed">
			<thead>
				<g:sortableColumn property="numero" title="Numero"
					style="text-align: center;" />

				<g:sortableColumn property="terreno" title="Tipo de Terreno"
					style="text-align: center;" />
				<g:sortableColumn property="plantas" title="Plantas"
					style="text-align: center;" />
			</thead>
			<tbody>
				<g:each in="${terrenos}" status="i" var="terreno">
					<g:set var="terreno" value="${terreno.nombre}" />
					<tr>
						<td style="text-align: center;">
							${i+1}
						</td>
						<td style="text-align: center;">
							${terreno.nombre}
						</td>
						<td style="text-align: center;">
							${terreno.getPlantas()}

						</td>
					</tr>
				</g:each>
			</tbody>
		</table>
	</div>

<div class="accordion" id="accordionPadre">
		<div class="accordion-group">
			<div class="accordion-heading" style="text-align: center;">
				<a class="accordion-toggle, btn btn-primary"  data-toggle="collapse"
					data-parent="#accordionPadre" href="#collapseTwo"> Jardin Zen
					Tierra </a>
			</div>
			<div id="collapseTwo" class="accordion-body collapse in">
				<div class="accordion-inner">

					<div>
						<table
							class="table table-striped table-bordered table-hover table-condensed">
							<thead>
								<g:sortableColumn property="plantasTerrestres"
									title="Plantas Jardin Zen Tierra" style="text-align: center;" />
								<g:sortableColumn property="ataque" title="Ataque"
									style="text-align: center;" />
								<g:sortableColumn property="defensa" title="Defensa"
									style="text-align: center;" />
							</thead>
							<tbody>
								<g:each in="${jardinZenTierra}" status="i" var="plantaTierra">
									<g:set var="plantaTierra" value="${plantaTierra}" />
									<tr>
										<td style="text-align: center;">
											${plantaTierra.nombre}
										</td>
										<td style="text-align: center;">
											${plantaTierra.danio}
										</td>
										<td style="text-align: center;">
											${plantaTierra.resistencia}
										</td>
									</tr>
								</g:each>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>


		<div class="accordion-group">
			<div class="accordion-heading" style="text-align: center;">
				<a class="accordion-toggle, btn btn-primary" data-toggle="collapse"
					data-parent="#accordionPadre" href="#collapseThree" > Jardin Zen
					Agua </a>
			</div>
			<div id="collapseThree" class="accordion-body collapse in">
				<div class="accordion-inner">

						<div>
							<table
								class="table table-striped table-bordered table-hover table-condensed">
								<thead>
									<g:sortableColumn property="plantasAquaticas"
										title="Plantas Jardin Zen Agua" style="text-align: center;" />
									<g:sortableColumn property="ataque" title="Ataque"
										style="text-align: center;" />
									<g:sortableColumn property="defensa" title="Defensa"
										style="text-align: center;" />
								</thead>
								<tbody>
									<g:each in="${jardinZenAgua}" status="i" var="plantaAgua">
										<g:set var="plantaAgua" value="${plantaAgua}" />
										<tr>
											<td style="text-align: center;">
												${plantaAgua.nombre}
											</td>
											<td style="text-align: center;">
												${plantaAgua.danio}
											</td>
											<td style="text-align: center;">
												${plantaAgua.resistencia}
											</td>
										</tr>
									</g:each>
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</div>
		</div>

<!-- popup plantar -->

<div class="modal fade" id="plantar1">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h3>Elegir fila</h3>
  </div>
  <div class="modal-body">
    <g:form controller="ZomVSPlanController">
    <select class="selectpicker" name="filaPlantar">
    <g:each in="${terrenos}" status="i" var="fila">
     <g:set var="fila" value="${fila}"/>
        <option value="${fila }">${i}</option>
    </g:each>      
    </select>
    <g:submitButton class="btn btn-primary" name="elegirFila" value="Elegir fila" action="elegirFila"/>
    </g:form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <<a type="btn btn-primary" class="btn btn-primary" href="#plantar2" data-toggle="modal" onClick="">Continuar</a>
  </div>
  
</div>

<div class="modal fade" id="plantar2">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h3>Elegir planta</h3>
  </div>
  <div class="modal-body">
  <g:form controller="ZomVSPlanController">
    <select class="selectpicker" name="plantar">
    <g:if test="${ jugadorA.filaSeleccionada.getClass() == terrenito.getClass()}">
    <g:each in="${jardinZenTierra}" status="i" var="plantaTierra">
     <g:set var="plantaTierra" value="${plantaTierra}"/>
        <option value="${plantaTierra }">${plantaTierra.nombre }</option>
     </g:each>   
    </g:if>
    <g:else>
    <g:each in="${jardinZenAgua}" status="i" var="plantaAgua">
     <g:set var="plantaAgua" value="${plantaAgua}"/>
        <option value="${plantaAgua }">${plantaAgua.nombre }</option>
     </g:each>
    </g:else>   
    </select>
    <g:submitButton class="btn btn-primary" name="elegirPlanta" value="Elegir planta" action="elegirPlanta"/>
  </g:form>  
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save Changes</a>
  </div>
</div>

<!-- popup Atacar -->

	<div class="modal fade" id="atacarMenu">
		<div class="modal-header">
			<a class="close" data-dismiss="modal">&times;</a>
			<h3>Elegir Zombie</h3>
		</div>
		<div class="modal-body">
			<g:form>
				<select name="fila" noSelection="1" >
					<optgroup label="Terrenos">
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
				</select>
				<select name="zombieElegido">
					<optgroup label="Zombies" noSelection="Zombie Basico">
						<g:each in="${zombies}" status="i" var="zombie">
							<option>
								${zombie.nombre}
							</option>
						</g:each>
				</select>
				<g:actionSubmit value="Atacar" class="btn btn-primary"
					action="atacar" />
			</g:form>
		</div>
		<div class="modal-footer">
			<div class="span8 text-center"></div>
			<a href="#" class="btn" data-dismiss="modal">Close</a>
		</div>
	</div>
</div>

</body>
</html>